<!--
  * @Description: 个人信息
  * @Author: rcc
  * @Date: 2024-08-07 09:16:01
  * @FilePath: /rc-recruitment/pages/site/personal/personal.vue
-->

<template>
  <view class="p-h24">
    <view class="main-view m-t40 p-h20">
      <view class="card flex-sb">
        <text class="w-150 text-700-130">头像：</text>
        <AssetUploader @success="onAvatarUploadSuccess">
          <image class="avatar" :src="genStaticUrl(avatarUrl)" mode="aspectFill" />
        </AssetUploader>
      </view>
      <view class="card required flex">
        <text class="w-150 text-700-130">姓名：</text>
        <input
          v-model="formState.nickname"
          class="flex-1 text-r"
          type="text"
          placeholder="请填写姓名" />
      </view>
      <view class="card required flex" @click="openGenderPicker(formState.gender)">
        <text class="w-150 text-700-130">性别：</text>
        <text v-if="[1, 0].includes(formState.gender)" class="flex-1 text-r text-100-130">{{ formState.gender === 1 ? '男' : '女' }}</text>
        <text v-else class="flex-1 text-r text-400-430">请选择</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" mode="" />
      </view>
      <view class="card required flex" @click="openBirthdayPicker(formState.birthday)">
        <text class="w-150 text-700-130">出生年月：</text>
        <text v-if="formState.birthday" class="flex-1 text-r text-400-130">{{ formState.birthday }}</text>
        <text v-else class="flex-1 text-r text-400-430">请选择</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" mode="" />
      </view>
      <view class="card required flex" @click="openCityPicker(formState.city)">
        <text class="w-150 text-700-130">所在城市：</text>
        <text v-if="formState.city" class="flex-1 text-r text-400-130">{{ formState.city }}</text>
        <text v-else class="flex-1 text-r text-400-430">请选择</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" mode="" />
      </view>
      <view class="card required flex" @click="openWorkExpPicker(formState.work)">
        <text class="w-150 text-700-130">工作经验：</text>
        <text v-if="formState.work === 0" class="flex-1 text-r text-400-130">无经验</text>
        <text v-else-if="formState.work" class="flex-1 text-r text-400-130">{{ formState.work }}年</text>
        <text v-else class="flex-1 text-r text-400-430">请选择</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" mode="" />
      </view>
      <view class="card required flex" @click="openDegreePicker(formState.highest_education)">
        <text class="w-150 text-700-130">最高学历：</text>
        <text v-if="formState.highest_education" class="flex-1 text-r text-400-130">{{ formState.highest_education }}</text>
        <text v-else class="flex-1 text-r text-400-430">请选择</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" mode="" />
      </view>
      <view class="card flex">
        <text class="w-150 text-700-130">手机号码：</text>
        <input
          v-model="formState.mobile"
          class="flex-1 text-r"
          type="text"
          placeholder="123890809804" />
      </view>
      <view class="card flex">
        <text class="w-150 text-700-130">邮箱地址：</text>
        <input
          v-model="formState.email"
          class="flex-1 text-r"
          type="text"
          placeholder="请输入邮箱地址" />
      </view>
      <view class="card flex-sb">
        <text class="w-150 text-700-130">简历状态：</text>
        <up-switch v-model="formState.resume_status" />
      </view>
    </view>

    <view class="flex-sb m-t40">
      <RcButton
        :width="340"
        :top="0"
        text="确认"
        @click="handleSubmit" />
      <RcButton
        :width="340"
        :top="0"
        background="#E9E9E9"
        color="#646464"
        text="取消" />
    </view>

    <up-picker
      ref="genderPickerRef"
      title="性别"
      keyName="label"
      closeOnClickOverlay
      :show="showGenderPicker"
      :columns="[genderPickerColumns]"
      @confirm="onGenderPickerConfirm"
      @cancel="closeGenderPicker"
      @close="closeGenderPicker" />

    <up-datetime-picker
      v-model="selectedBirthday"
      title="出生年月"
      :show="showBirthdayPicker"
      closeOnClickOverlay
      :minDate="new Date('1990-01-01').getTime()"
      :maxDate="Date.now()"
      mode="date"
      @confirm="onBirthdayPickerConfirm"
      @cancel="closeBirthdayPicker"
      @close="closeBirthdayPicker" />

    <up-picker
      ref="cityPickerRef"
      title="所在城市"
      keyName="label"
      closeOnClickOverlay
      :show="showCityPicker"
      :columns="cityPickerColumns"
      @confirm="onCityPickerConfirm"
      @cancel="closeCityPicker"
      @change="onCityPickerChange"
      @close="closeCityPicker" />

    <up-picker
      ref="workExpPickerRef"
      title="工作经验"
      keyName="label"
      closeOnClickOverlay
      :show="showWorkExpPicker"
      :columns="[workExpPickerColumns]"
      @confirm="onWorkExpPickerConfirm"
      @cancel="closeWorkExpPicker"
      @close="closeWorkExpPicker" />

    <up-picker
      ref="degreePickerRef"
      title="最高学历"
      closeOnClickOverlay
      :show="showDegreePicker"
      :columns="[degreePickerColumns]"
      @confirm="onDegreePickerConfirm"
      @cancel="closeDegreePicker"
      @close="closeDegreePicker" />
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import RcButton from '@/components/button.vue'
  import AssetUploader from '@/components/asset-uploader.vue'
  import { useEduDegree } from '@/pages/resume/educate/useEduDegree'
  import { useGenderPicker } from './useGenderPicker'
  import { useBirthdayPicker } from './useBirthdayPicker'
  import { useCityPicker } from './useCityPicker'
  import { useWorkExpPicker } from './useWorkExpPicker'
  import { genStaticUrl, isEmpty, timeFormat } from '@/utils/utils'
  import type { TResume } from '@/types/api.d.ts'
  import { useUserStore } from '@/stores/user'

  type UserProfileFormState = {
    nickname: string;
    gender: 1 | 0 | null,
    birthday: string;
    city: string;
    work: number | null;
    highest_education: string;
    mobile: string;
    email: string;
    resume_status: boolean;
    avatar:string;
  }

  let myResume: TResume | null = null

  const formState = reactive<UserProfileFormState>({ nickname: '', gender: null, birthday: '', city: '', work: null, highest_education: '', mobile: '', email: '', resume_status: true, avatar: '' })

  const avatarUrl = ref('')

  const { getUserInfo } = useUserStore()

  const {
    pickerRef: genderPickerRef,
    columns: genderPickerColumns,
    show: showGenderPicker,
    open: openGenderPicker,
    close: closeGenderPicker,
  } = useGenderPicker()

  const {
    selected: selectedBirthday,
    show: showBirthdayPicker,
    open: openBirthdayPicker,
    close: closeBirthdayPicker,
  } = useBirthdayPicker()

  const {
    pickerRef: cityPickerRef,
    columns: cityPickerColumns,
    show: showCityPicker,
    onChange: onCityPickerChange,
    open: openCityPicker,
    close: closeCityPicker,
  } = useCityPicker()

  const {
    pickerRef: workExpPickerRef,
    columns: workExpPickerColumns,
    show: showWorkExpPicker,
    open: openWorkExpPicker,
    close: closeWorkExpPicker,
  } = useWorkExpPicker()

  const {
    pickerRef: degreePickerRef,
    columns: degreePickerColumns,
    show: showDegreePicker,
    open: openDegreePicker,
    close: closeDegreePicker,
  } = useEduDegree()

  const onGenderPickerConfirm = (e: any) => {
    const selected = e.value[0]

    formState.gender = selected.value

    closeGenderPicker()
  }

  const onBirthdayPickerConfirm = () => {
    formState.birthday = timeFormat(selectedBirthday.value)

    closeBirthdayPicker()
  }

  const onCityPickerConfirm = (e: any) => {
    const [p, c] = e.value
    formState.city = `${p.label}-${c.label}`

    closeCityPicker()
  }

  const onWorkExpPickerConfirm = (e: any) => {
    const selected = e.value[0]

    formState.work = selected.value

    closeWorkExpPicker()
  }

  const onDegreePickerConfirm = (e: any) => {
    const val = e.value[0]

    formState.highest_education = val

    closeDegreePicker()
  }

  const onAvatarUploadSuccess = (data: {
    url: string;
    fullurl: string;
  }) => {
    formState.avatar = data.url
    avatarUrl.value = data.fullurl
  }

  const handleSubmit = () => {
    if (!validate()) return

    const { resume_status, ...rest } = formState

    const data = {
      ...rest,
      resume_status: resume_status ? 1 : 2,
      fijian: myResume.fijian,
    }

    uni.$u.post('/user/profile', data).then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code === 1) {
        getUserInfo()
        reloadPrePage()
        uni.navigateBack()
      }
    })
  }

  // 重新加载上一个页面的数据
  const reloadPrePage = () => {
    const pages = getCurrentPages()
    const page = pages[pages.length - 2]
    page.$vm.$.exposed.getMyResume()
  }

  const validate = () => {
    if (isEmpty(formState.nickname)) {
      uni.showToast({
        title: '请填写姓名',
        icon: 'none',
      })
      return false
    }

    if (typeof (formState.gender) !== 'number') {
      uni.showToast({
        title: '请选择性别',
        icon: 'none',
      })
      return false
    }

    if (isEmpty(formState.birthday)) {
      uni.showToast({
        title: '请选择出生年月',
        icon: 'none',
      })
      return false
    }

    if (isEmpty(formState.city)) {
      uni.showToast({
        title: '请选择所在城市',
        icon: 'none',
      })
      return false
    }

    if (isEmpty(formState.work)) {
      uni.showToast({
        title: '请选择工作经验',
        icon: 'none',
      })
      return false
    }

    if (isEmpty(formState.highest_education)) {
      uni.showToast({
        title: '请选择最高学历',
        icon: 'none',
      })
      return false
    }

    return true
  }

  const getMyResume = () => {
    uni.showLoading({ mask: false })
    uni.$u.get<TResume>('/resume/my').then((res) => {
      if (res.code === 1) {
        const data = res.data
        myResume = data
        formState.nickname = data.nickname
        formState.gender = data.gender
        formState.birthday = data.birthday
        formState.city = data.city
        formState.work = data.work
        formState.highest_education = data.highest_education
        formState.mobile = data.mobile
        formState.email = data.email
        // 简历状态 1开启 2关闭
        formState.resume_status = data.resume_status === 1
        avatarUrl.value = data.avatar
      }
    }).finally(() => {
      uni.hideLoading()
    })
  }

  onLoad(() => {
    getMyResume()
  })
</script>

<style lang="scss" scoped>
	page {
		background-color: $page-color-4;
	}

	.main-view {
		border-radius: 10rpx;
		background-color: $bg-color-1;

		.card {
			height: 110rpx;
			border-bottom: 1rpx solid $border-color-4;

			&:last-child {
				border: none;
			}
		}
	}

	.required {
		&:before {
			content: "*";
			color: $text-color-6;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 2rpx solid #F1F1F1;
	}
</style>
